<template>
  <div class="post" @click="$router.push({path:`/aritcle/${news.id}`})">
    <!-- 类型1一张图片 -->
    <div class="type1" v-if="news.type == 1 && news.cover.length < 3">
      <div class="left">
        <h3 class="title">{{ news.title }}</h3>
        <p class="desc">
          <span>{{ news.user.nickname }}</span>
          <span> {{news.comment_length}}跟帖</span>
        </p>
      </div>
      <div class="right">
        <van-image
          height="100%"
          fit="contain"
          :src="news.cover[0].url"
        />
      </div>
    </div>
    <!-- 类型1三张图片 -->
    <div class="type2" v-else-if="news.type == 1 && news.cover.length >= 3">
      <h3 class="title">{{ news.title }}</h3>
      <div class="cover-group">
        <van-image class="cover-img" v-for="item in news.cover" :key="item.id"  fit="cover" :src="item.url" />
      </div>
      <p class="desc">
        <span>{{ news.user.nickname }}</span>
        <span>{{ news.comment_length}}跟帖</span>
      </p>
    </div>
    <!-- 一个视频 -->
    <div class="type3" v-else>
         <h3 class="title">{{ news.title }}</h3>
         <div class="video-group">
           <i class="iconfont iconshipin"></i>
            <van-image class="video-img"   fit="cover" :src="news.cover[0].url" />
         </div>
          <p class="desc">
        <span>{{ news.user.nickname }}</span>
        <span>{{ news.comment_length }}跟帖</span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    news: Object,
  },
};
</script>

<style lang="less" scoped>
// 公共样式
.post {
  border-bottom: 1px solid #ccc;
  padding: 10px;
}
// 标题和跟帖都是一样的，所以写到外面，变成公共的
.title {
  font-size: 16px;
  margin: 5px 0;
}
.desc {
  color: #666;
  margin: 5px 0;
  span {
    font-size: 12px;
    margin-right: 10px;
  }
}
// 形态1：左右结构 - 1张图
.type1 {
  display: flex;
  .left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .right {
    width: 120px;
    height: 75px;
  }
}
// 形态2：上下结构 - 3张图
.type2 {
  .cover-group {
    display: flex;
    justify-content: space-between;
    .cover-img {
      width: 33%;
    }
  }
}
// 形态3：上下结构 - 1个视频
.type3 {
  .video-group {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    .iconshipin {
      font-size: 50px;
      color: #fff;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.5);
      position: absolute;
      z-index: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .video-img {
      width: 100%;
    }
  }
}
</style>